<template>
    <div class="h5">
        <div class="h5-nav-train">
            <ul>
                <li ref="li"
                    v-for="item in list"
                    :key="item.id"
                    :class="{ 'activeNavTrain': item.page == page }"
                    @click="toH5(item)"
                >
                    {{ item.name }}
                    <span class="navTrain"></span>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 0,
                    name: 'H5全栈工程师',
                    page:'/h5'
                },
                {
                    id: 1,
                    name: 'Python+人工智能',
                    page:'/python'
                },
                {
                    id: 2,
                    name: 'UI/UE设计',
                    page:'/ui'
                },
                {
                    id: 3,
                    name: 'Java+大数据',
                    page:'/java'
                }
            ],
            id: 0,
            page:this.$route.path
        }
    },
    methods:{
        toH5(item){
            this.page=item.page
            this.$router.push({
                path:item.page
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.h5 {
    .h5-nav-train {
        width: 100%;
        height: 43px;
        background-color: #06c;
        min-width: 1200px;
        ul {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            box-sizing: border-box;
            li {
                color: #fff;
                padding: 0 30px;
                line-height: 43px;
                position: relative;
                cursor: pointer;
                font-size: 16px;
                .navTrain {
                    width: 2px;
                    height: 16px;
                    position: absolute;
                    top: 0;
                    right: 0;
                    background-color: #9ff;
                    transform: translateY(14px);
                }
            }
            li:last-child{
                .navTrain{
                    display: none;
                }
            }
            .activeNavTrain {
                color: #9ff;
            }
        }
    }
}
</style>